<template>
	<view>
		<view v-if="userInfo.name" class="head">
			<view class="box_flex flex-c">
				<image :src="userInfo.face"></image>
				<view class="right">
					<view class="name">
						{{ userInfo.name }}
						<text v-if="userInfo.idcard && userInfo.idcard!='undefined'">@{{ userInfo.idcard }}</text>
					</view>
					<view class="tel">{{ userInfo.phone }}</view>
				</view>
			</view>
			<view class="idCard">会员卡号：{{ userInfo.card }}</view>
		</view>
		<view class="bt">当日可用票券</view>
		<view class="card" v-for="(item, index) in list" :key="index" @click="xzBtn(item)">
			<view class="f30 c2 fwb">{{ item.name }}</view>
			<view class="flex-cb mt24">
				<view class="cont">
					<view v-if="item.areaName || item.siteModelName" class="f26">
						<text class="c6" v-if="item.areaName">适用场地</text>
						<text :class="item.areaName?'ml20':''">{{ item.areaName || item.siteModelName }}</text>
					</view>
					<view v-if="item.expirationTime" class="f26">
						<text class="c6">到期日期</text>
						<text class="c3 ml20">{{ item.expirationTime }}</text>
					</view>
					<view v-if="item.useTime" class="f26">
						<text class="c6">使用时间</text>
						<text class="c3 ml20">{{ item.useTime }}</text>
					</view>
					<view v-if="item.itemName" class="f26">
						<text class="c6">适用项目</text>
						<text class="c3 ml20">{{ item.itemName }}</text>
					</view>
					<view v-if="item.residueDegree && item.residueDegree != '0/0'" class="f26">
						<text class="c6">使用情况</text>
						<text v-if="item.residueDegree.indexOf('/不限') > 0" class="c3 ml20">人数不限</text>
						<text v-else
							class="c3 ml20">已使用{{ item.residueDegree }}{{ item.type == 41 || item.type == 42 ? '次' : '人' }}</text>
					</view>
				</view>
				<image
					:src="id === item.code ? '/static/images/order_ic_choose_select.png' : '/static/images/order_ic_choose.png'"
					class="selectImg" />
			</view>
		</view>
		<u-loadmore v-if="!is && list.length >= 10" status="nomore" line />
		<view style="height: 150rpx;"></view>
		<view class="no-list" v-if="!list || list.length == 0">
			<image src="/static/images/default_noticket.png" style="width: 360rpx;height: 212rpx;"></image>
			<view>无可用票券</view>
		</view>
		<view v-if="id" class="foot flex-cb">
			<view v-if="info.type == '41' && info.residueDegree != '0/0'" class="foot_left flex-c">
				核销次数：
				<u-number-box v-model="num" integer></u-number-box>
			</view>
			<view class="hxBtn" @click="hxBtn">确认核销</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 0, //页码
				is: true, //控制是否还能切换下一页
				list: [],
				memberId: '',
				userInfo: {},
				id: '',
				code: '',
				num: 1,
				info: {}
			};
		},
		onLoad(options) {
			if (options.id) {
				this.memberId = options.id
				this.userInfo = {
					name: options.name,
					card: options.card,
					idcard: options.idcard,
					phone: options.phone,
					face: options.face
				}
			} else if (options.code) {
				this.code = options.code
				this.userInfo = {}
			}
			this.getList()
		},
		methods: {
			xzBtn(e) {
				this.id = e.code
				this.info = e
				this.num = 1
			},
			hxBtn() {
				this.$app.ajax({
					data: {
						param: {
							venueId: uni.getStorageSync('GYMID'),
							code: this.id,
							num: this.num
						}
					},
					api: this.$api.getCode()
				}).then(res => {
					if (res.errorCode === '000000') {
						uni.showToast({
							title: '核验成功',
							icon: 'success',
							duration: 2000
						});
					}
					setTimeout(() => {
						this.is = true;
						this.page = 0;
						this.list = [];
						this.getList();
					}, 2000);
				});
			},
			// 列表
			getList() {
				if (!this.is) return
				this.page = this.page + 1
				this.$app.ajax({
					data: {
						pagination: {
							page: this.page,
							rows: 10
						},
						param: {
							venueId: uni.getStorageSync('GYMID'),
							memberId: this.memberId,
							code: this.code
						}
					},
					api: this.$api.inoutCode2OM()
				}).then(res => {
					if (res.errorCode != '000000') return
					if (res.recordList.length < 10 || !res.recordList) {
						this.is = false
					}
					let arr = res.recordList
					let arrs = []
					if (arr) {
						arrs = this.list.concat(arr)
					} else {
						arrs = []
					}
					this.list = arrs
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>

	.head {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
	}

	.box_flex image {
		width: 72rpx;
		height: 72rpx;
		margin-right: 30rpx;
		border-radius: 50%;
	}

	.right {
		flex: 1;
	}

	.name {
		font-weight: 500;
		color: #222222;
		font-size: 30rpx;
		line-height: 1.5;
		margin-bottom: 10rpx;
	}

	.name text {
		font-weight: 400;
		color: #4167c1;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.tel {
		color: #999999;
		line-height: 1.5;
		font-size: 24rpx;
	}

	.idCard {
		color: #333333;
		font-size: 26rpx;
		margin-top: 10rpx;
		line-height: 1.5;
	}

	.bt {
		font-weight: 500;
		color: #222222;
		font-size: 32rpx;
		line-height: 1.5;
		margin-top: 30rpx;
		padding-left: 30rpx;
	}

	.card {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		margin: 20rpx auto 0;
		width: 690rpx;
	}

	.cont {
		width: 580rpx;
	}

	.cont view {
		margin-top: 16rpx;
	}

	.cont view:first-of-type {
		margin-top: 0;
	}

	.selectImg {
		width: 36rpx;
		height: 36rpx;
	}

	.hxBtn {
		width: 184rpx;
		text-align: center;
		line-height: 68rpx;
		background: #4167c1;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: #ffffff;
	}

	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background-color: #fff;
		z-index: 999;
	}
</style>